<template>
  <div class="_wz_certificateData">
    <Card dis-hover :bordered="true" style="margin: 10px 0px;">
      <p slot="title">基本信息</p>
      <Form label-position="right" :label-width="120" inline>
        <div class="demo-drawer-profile">
          <Row>
            <i-col span="4">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!userData.avatar?apiUrl.imgUrl+userData.avatar:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </i-col>
            <i-col span="20" style="margin-bottom: 0px;">
              <i-col span="8">
                <FormItem label="人员名称：">
                  {{!!userData.name?userData.name:'--'}}
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="人员性别：">
                  {{!!userData.gender?userData.gender:'--'}}
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="联系电话：">
                  {{!!userData.phone?userData.phone:'--'}}
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="从业类型：">
                  {{!!userData.typeName?userData.typeName:'--'}}
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="身份证号：">
                  {{!!userData.identifyNum?userData.identifyNum:'--'}}
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="运输企业：">
                  {{!!userData.deptName?userData.deptName:'--'}}
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="家庭地址：">
                  {{!!userData.address ? userData.address : '--'}}
                </FormItem>
              </i-col>
            </i-col>
            <i-col span="24">
              <FormItem label="备注：">
                {{!!userData.remark ? userData.remark : '--'}}
              </FormItem>
            </i-col>
            <i-col span="8">
              <div class="demo-upload-list" style="width: 80%;">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!license.driverPic?apiUrl.imgUrl+license.driverPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div style="text-align: center;line-height: 35px;">驾驶证照片</div>
            </i-col>
            <i-col span="8">
              <div class="demo-upload-list" style="width: 80%;">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!person.personFrontPic?apiUrl.imgUrl+person.personFrontPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div style="text-align: center;line-height: 35px;">身份证正面照</div>
            </i-col>
            <i-col span="8">
              <div class="demo-upload-list" style="width: 80%;">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!person.personBackPic?apiUrl.imgUrl+person.personBackPic:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div style="text-align: center;line-height: 35px;">身份证背面照</div>
            </i-col>

          </Row>
        </div>
      </Form>
    </Card>
  </div>
</template>
<script>
  export default {
    props: ["selectData"],
    data() {
      return {
        userData: {},//用户信息
        license: {},//身份证
        person: {},//驾驶证
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      this.userDataFun()
    },
    methods: {//执行的方法
      userDataFun() {
        var that = this;
        if (!!!that.selectData && that.selectData.length <= 0) {
          that.userData = {};//用户信息
          that.license = {};//身份证
          that.person = {};//驾驶证
          return false;
        }
        //基本信息
        that.axios.post(that.apiUrl.webApi + "/core/driver/coreDriverInfo", {uuid: that.selectData}).then(res => {
          if (!!res) {
            that.userData = !!res.data.data ? res.data.data : {};
          }
        }).catch(err => {
          console.log('失败', err);
        })
        //驾驶证信息
        that.axios.post(that.apiUrl.webApi + "/core/driver/coreDriverLicenseInfo", {uuid: that.selectData}).then(res => {
          if (!!res) {
            that.license = !!res.data.data ? res.data.data : {};
          }
        }).catch(err => {
          console.log('失败', err);
        })
        //身份证信息
        that.axios.post(that.apiUrl.webApi + "/core/driver/coreDriverPersonInfo", {uuid: that.selectData}).then(res => {
          if (!!res) {
            that.person = !!res.data.data ? res.data.data : {};
          }
        }).catch(err => {
          console.log('失败', err);
        })

      }
    },
    watch: {//监听
      selectData(news, old) {
        this.userDataFun();
      }
    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_certificateData {
    .demo-drawer-profile {
      .demo-upload-list {
        margin: auto;
        display: block;
        width: 100px;
        height: 132px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

        img {
          width: 100%;
          height: 100%;
        }

        .demo-upload-list-cover {
          align-items: center;
          display: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, .6);

          i {
            display: block;
            margin: auto;
            color: #fff;
            font-size: 40px;
            cursor: pointer;
          }
        }
      }

    }

    .demo-upload-list:hover .demo-upload-list-cover {

      display: flex;
    }

    .demo-drawer-profile {
      font-size: 14px;
    }

  }

</style>
